<style lang="less">
 @import "../style/variables.less";
 .home-news{
  position: relative;
 }
.hot-news-list{
  margin-top:20px;
  padding:0 10px;
  h5{
    font-size: 14px;
    color:#999;
    margin-bottom: 20px;
  }
  .news-item{
    margin-bottom: 10px;
    display: block;
    padding:15px;
    border:1px solid #ccc;
    box-shadow: 1px 1px 2px #bbb;
    height: 100px;
    border-radius: 5px;
  }
  .news-title{
    width: 75%;
    margin-right: 5%;
    font-size: 20px;
    color:#333;
  }
  .news-img{
    width:20%;
  }
}
.top-story{
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
}
.top-story-wrapper{
  width: 500%;
  height: 100%;
  position: absolute;
  left: 0;
  top:0;
  transition: all .5s;
}
.story-slide{
  width: 20%;
  height: 100%;
  display: block;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  float: left;
  position: relative;
  h2{
    position: absolute;
    left:15px;
    right: 15px;
    bottom: 30px;
    color:#fff;
  }
}
.story-pagination{
  position: absolute;
  left:0;
  bottom: 10px;
  width: 100%;
  text-align: center;
  display: inline-block;
  .story-bullet-container{
    display: inline-block;
    position: relative;
  }
  .story-bullet{
    display: inline-block;
    float: left;
    margin:2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(200,200,200,.8);
    &:first-child{
      margin-left: 0;
    }
    &:last-child{
      margin-right: 0;
    }
  }
  .story-bullet-active{
    position: absolute;
    left: 0px;
    top:0;
    bottom:0;
    margin: auto;
    background: #fff;
    transition:all .5s;
  }
}
.loading{
    position: absolute;
    left:0;
    top:0;
    right: 0;
    margin: auto;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    z-index: 10;
    font-size: 20px;
    color:@color;
    background: #fff;
    border-radius: 50%;
  }
</style>
<template>
  <div class="home-news">
    <transition>
      <div class="loading" v-if="loading"><i class="fa fa-refresh fa-spin"></i></div>
    </transition>
     <!-- 头部新闻 -->
    <div class="top-story">
      <div class="top-story-wrapper" :style="{left:left}"
      v-touch:swipeleft="next"
      v-touch:swiperight="prev">
        <router-link :to="'/news/'+story.id" class="story-slide" v-for="story in top_stories" :style= "{backgroundImage:'url('+imgUrl+'/public-pic?img='+story.image + ')'}">
          <h2>{{story.title}}</h2>
        </router-link>
      </div>
      <div class="story-pagination">
        <div class="story-bullet-container clearfix">
          <span class="story-bullet"></span>
          <span class="story-bullet"></span>
          <span class="story-bullet"></span>
          <span class="story-bullet"></span>
          <span class="story-bullet"></span>
          <span class="story-bullet story-bullet-active" :style="{left:bulletLeft}"></span>
        </div>
      </div>
    </div>
    <!-- 新闻列表 -->
    <div class="hot-news-list">
      <h5>今日热闻</h5>
      <router-link :to="'/news/'+news.id" class="news-item" v-for="news in stories">
        <div class="news-title left">{{news.title}}</div>
        <div class="news-img right">
          <img :src="imgUrl+'/public-pic?img='+news.images[0]" class="img-responsive" />
        </router-link>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import { mapState } from 'vuex'
  export default {
    name:'hot-news',
    data() {
      return {
        activeIndex:0,
        timer:null,
        interval:3000,
        loading:false,
      }
    },
    computed:{
      left(){
        return -this.activeIndex*100 + '%'
      },
      bulletLeft() {
        return this.activeIndex*9 + 'px'
      },
      ...mapState({
        stories: state => state.stories,
        imgUrl: state => state.imgUrl,
        top_stories: state => state.top_stories,
        status: state => state.status
      })
    },
    created() {
      if(this.$store.state.stories.length == 0){
        this.$store.dispatch('getData',{
          url:'/api/4/news/latest',
          mutation: 'GET_STORIES'
        });
        this.setDocumentTitle('首页')



      }
    },
    methods: {
      handleMouseEnter() {
        this.hover = true;
        this.pauseTimer();
      },

      handleMouseLeave() {
        this.hover = false;
        this.startTimer();
      },

      pauseTimer() {
        clearInterval(this.timer);
      },

      startTimer() {
        if (this.interval <= 0 ) return;
        this.timer = setInterval(this.playSlides, this.interval);
      },

      playSlides() {
        if (this.activeIndex < this.top_stories.length - 1) {
          this.activeIndex++;
        } else {
          this.activeIndex = 0;
        }
      },
      prev() {
        this.handleMouseEnter()
        if (this.activeIndex != 0) {
          this.activeIndex -= 1;
        }else{
          return false
        }
      },
      next() {
        this.handleMouseEnter()
        if (this.activeIndex < this.top_stories.length - 1) {
          this.activeIndex += 1;
        }else{
          return false
        }

      },

      handleIndicatorClick(index) {
        this.activeIndex = index;
      }
    },
    mounted() {
      this.startTimer()
      let newsList = document.querySelector('.home-news')
      let that = this
      let startP,endP,startY,endY
      var listener = function(e) {
        startP = document.body.scrollTop
        startY = e.changedTouches[0].clientY
        newsList.addEventListener('touchend',function(e){
          endP = document.body.scrollTop
          endY = e.changedTouches[0].clientY
          let moveDistance = endP-startP
          let moveY = startY-endY
          console.log(moveDistance)
          console.log(moveY)
          if(moveY<=-50 && moveDistance == 0){
            that.$store.dispatch('refreshData','/api/4/news/latest')
            newsList.removeEventListener('touchstart',listener)
            that.loading = true
          }

        })
      }
      newsList.addEventListener('touchstart',listener)
    },
    watch:{
      status(val) {
        if(val){
          this.loading = false
        }
      }
    }
  }
</script>
